<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>GreenSock: Basic Tween</title>
     
<style>
body{
    background-color:#000;
}
#demo {
    width: 692px;
    height: 60px;
    background-color: #333;
    padding: 8px;
}
#logo {
    position: relative;
    width: 60px;
    height: 60px;
	background-color:#ace;
}
</style>
</head>
 
<body>
<div id="demo">
    <div id="logo"></div>
</div>
 
<!--- The following scripts are necessary to do TweenLite tweens on CSS properties -->
<script type="text/javascript" src="../lib/greensock/plugins/CSSPlugin.js"></script>
<script type="text/javascript" src="../lib/greensock/TweenLite.js"></script>
 
 
<script>
//we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one.

	var logo = document.getElementById("logo");
	var demo = document.getElementById("demo");
	demo.onmouseenter = tween;
	function tween(){
		alert(1)
		TweenLite.to(logo, 1, {css:{left:"632px"}});
	}
</script>